<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { Game, QuestionButton } from "./game";

const visible = defineModel();

const props = defineProps({
  msg: {
    type: String,
    required: true,
  },
  level: {
    type: Number,
    required: true,
  },
});

const title = ref(props.msg);

watch(
  () => props.msg,
  (newMsg) => {
    title.value = newMsg;
  },
);

const emit = defineEmits(["restart"]);

const buttons = reactive<QuestionButton[]>(
  Game.questions[props.level - 1].buttons,
);

watch(
  () => props.level,
  (newLevel) => {
    buttons.splice(0, buttons.length, ...Game.questions[newLevel - 1].buttons);
  },
);

function buttonMsg(type: QuestionButton) {
  let msg = "";
  switch (type) {
    case QuestionButton.ask:
      msg = "好的";
      break;
    case QuestionButton.confirm:
      msg = "是";
      break;
    case QuestionButton.redirect:
      msg = "否，继续探索";
      break;
  }
  return msg;
}

function onClick(type: QuestionButton) {
  if (type === QuestionButton.redirect) {
    buttons.splice(0, buttons.length, QuestionButton.ask);
    visible.value = true;
    title.value = "请咨询你旁边的人";
  } else if (type === QuestionButton.confirm) {
    visible.value = false;
    emit("restart");
  } else {
    visible.value = false;
    title.value = props.msg;
  }
}
</script>

<template>
  <el-dialog
    v-model="visible"
    width="400"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <template #header>
      <p v-for="x in title.split('\n')">{{ x }}</p>
    </template>

    <div class="container">
      <el-button
        class="button"
        type="primary"
        v-for="btn in buttons"
        @click="onClick(btn)"
      >
        {{ buttonMsg(btn) }}
      </el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
.container {
  display: flex;
}

.button {
  flex: 1;
}
</style>
